<template>
    <div>
      <Form ref="eleForm" :model="fig" :rules="rules" style="text-align:left;line-height: normal;"
        label-position="top">
        <Divider style="margin-top:0">字段配置</Divider>
        <FormItem prop="field" label="绑定字段" style="line-height: normal;">
          <div>
            <Input v-model="fig.field" placeholder="请填写字段名"/>
          </div>
          <div class="tips" style="line-height: normal;margin-top:10px">绑定字段代表数据库存储的字段以及表格显示的字段</div>
        </FormItem>
        <FormItem label="字段别名" style="line-height: normal;">
          <div>
            <Input v-model="fig.tableLabel" placeholder="请填写字段别名"/>
          </div>
          <div class="tips" style="line-height: normal;margin-top:10px">字段别名表示该字段在表格或其他地方的展示名称</div>
        </FormItem>
        <FormItem label="默认值" style="line-height: normal;">
          <div>
            <Input v-model="fig.default" placeholder="请填写字段默认值"/>
          </div>
        </FormItem>
        <Divider>组件属性</Divider>
        <FormItem label="类型" style="line-height: normal;" v-if="fig.type !== 'textarea'">
          <div>
            <Select v-model="fig.type">
              <Option value="text">文本</Option>
              <Option value="password">密码</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem label="标签" style="line-height: normal;">
          <div>
            <Input v-model="fig.label" placeholder="请填写字段标签"/>
          </div>
        </FormItem>
        <FormItem label="组件大小" style="line-height: normal;"  v-if="fig.type !== 'textarea'">
          <div>
            <Select v-model="fig.attr.size">
              <Option value="default">默认</Option>
              <Option value="large">大尺寸</Option>
              <Option value="small">小尺寸</Option>
            </Select>
          </div>
        </FormItem>
        <div style="display:flex;justify-content: space-between;">
          <div>
            <FormItem label="隐藏节点" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.hide"/>
              </div>
            </FormItem>
          </div>
          <div>
            <FormItem label="是否只读" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.attr.readonly"/>
              </div>
            </FormItem>
          </div>
        </div>
        <FormItem label="快捷清空" style="line-height: normal;" v-if="fig.type !== 'textarea'">
          <div>
            <SwitchIview v-model="fig.attr.clearable"/>
          </div>
        </FormItem>
        <FormItem label="自适应高度" style="line-height: normal;" v-if="fig.type === 'textarea'">
          <div>
            <SwitchIview v-model="fig.attr.autosize"/>
          </div>
        </FormItem>
        <FormItem label="最大长度" style="line-height: normal;">
          <div>
            <Input v-model="fig.attr.maxlength" placeholder="请填写最大输入长度" type="number"/>
          </div>
        </FormItem>
        <FormItem label="占位文本" style="line-height: normal;">
          <div>
            <Input v-model="fig.attr.placeholder" placeholder="请填写占位文本"/>
          </div>
        </FormItem>
        <FormItem label="默认行数" style="line-height: normal;" v-if="fig.type === 'textarea'">
          <div>
            <InputNumber v-model="fig.attr.rows" placeholder="请填写默认行数" style="width:100%"/>
          </div>
        </FormItem>
      </Form>
    </div>
</template>

<script>
export default {
  name: 'InputAttr',
  props: {
    config: {
      type: Object,
      default: undefined
    }
  },
  watch: {
    'config': {
      handler: function (e) {
        this.fig = e
      }
    }
  },
  data () {
    return {
      fig: this.config,
      rules: {
        field: [
          { required: true, message: '请填写字段名', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
